@charset "utf-8";

*{
    margin: 0; 
    padding: 0;
    list-style: none;
    text-decoration: none;
} 
.fl{
    float: left;
}
.fr{
    float: right;
}
.clear{
    content:"" ;
    display: block;
    clear: both;
}

header{
    
    .above{
        height: 119px;
        
        img{
            margin-top: 20px;
            margin-left: 40px;
        }
        ul{
            margin-top: 38px;
            a{
                color: #000;
                li{
                    margin-left: 100px;
                    span{
                        font-size: 20px;
                    }
                    p{
                        color: #a7a7a7;
                        font-size: 17px;
                        text-align: center;
                    }
                    
                }   
            }
            a:last-of-type li{
                margin-right: 85px;
            }
            a:hover{
                color: red;
            }
        }    
        .wb{
            .weibo{
                height: 24px;
                background-color: #00b7ee;
                border-radius: 5px;
                i{
                    color: #ffffff;
                    font-size: 20px;
                }
            }
            margin-right: 40px;
        }

    }
}

.gem{
    height: 245px;
    margin-top: 85px;
    padding-top: 50px;
    // background-color: rgb(102, 193, 230);
    .description{
        margin-left: 754px;
        height: 150px;
        width: 480px;
        // text-align: center;
        h1{
            font-size: 26px;
            font-weight: 350;
            position: relative;
            height: 58px;
            line-height: 50px;
            text-align: center;
        }
        h1::before{
            content: "";
            position: absolute;
            top: -14px;
            left: 220px;
            border: 1px solid none;
            background-color: #ffd205;
            border-radius: 15px;
            width: 37px;
            height: 9px;
        }
        p{
            margin-top: 4px;
            width: 480px;
            font-size: 12px;
            color: #535556;
        }
        p:nth-of-type(3){
            text-align: left;
        }
        ul{
            height: 20px;
            margin-top: 34px;
            padding: 0 100px;
            li{
                font-size: 14px;
                width: 64px;
                height: 17px;
                text-align: center;
                line-height: 17px;
                padding: 5px 5px;
                margin-left: 10px;
                color: #0c595a;
                float: left;
                border: 1px solid #c5c5c4;
                border-radius: 15px;
            }
            li:nth-of-type(2){
                width: 84px;
            }
        }
        
    }
}

.bg{
    height: 300px;
    // overflow: hidden;
    padding-top: 90px;
    background: url(../img/bac.png) no-repeat;
    background-size: cover;
    position: relative;
    
    .box{
        width: 690px;
        display: flex;
        justify-content: space-around;
        // margin-top: 90px;
        margin-left: 650px;
    }
    .fish{
        position: absolute;
        left: 318px;
        top: -265px;
    }
    ul{
        height: 50px;
        width: 200px;
        position: absolute;
        top: 175px;
        left: 408px;
        li{
            float: left;
            border: 1px solid black;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            background-color: white;
            margin-left: 5px;
        }
        li:first-child{
            background-color: skyblue;
        }
    }
}

.use{
    .box{
        width: 200px;
        height: 100px;
        // line-height: 100px;
        margin: 0 auto;
        margin-top: 80px;
        text-align: center;
        h1{
            font-size: 25px;
            font-weight: 100;
        }
        h1::before{
            content: "";
            display: block;
            border: 1px solid none;
            background-color: #ffd205;
            border-radius: 15px;
            width: 37px;
            height: 9px;
            margin-left: 78px;
            margin-bottom: 12px;
        }
        p{
            font-size: 12px;
        }
    }
}

section{
    .logo{
        width: 806px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        // img{

        // }
        .iphone{
            p{
                height: 32px;
                line-height: 32px;
                font-size: 20px;
            }
        }
        h2{
            font-style: oblique;
        }
        .font{
            margin-top: 20px;
            text-align: center;
        }
        .photo{
            .font{
                margin-top: 33px;
            }
        }
        .moblie{
            height: 60px;
            padding-top: 44px; 
        }
        
        img{
            margin-left: 28px;
        }
        
        span{
            color: #939597;
            font-size: 13px;
            
        }
    }
}

footer{
    margin-top: 150px;
    .copy{
        position: relative;
        line-height: 80px;
        text-align: center;
        background-color: #08cacc;
        color: #ffffff;
        .ta{
            position: absolute;
            left:20px;
            bottom: 0px;
        }
        .mic{
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
    }
    
} 




